/* 头部 */
<template>
  <div class="header">
    <Row>
      <Col span="4">
        <img src="../../../assets/images/logo.png" alt="" style="vertical-align:middle">
      </Col>
      <Col span="3" offset='1'>
        <Button type="primary" @click="onlineHelp">帮助</Button>
        <Modal title="帮助内容" v-model="onlineHelpModal" :mask-closable='false' width='80%' :styles="{top:'50px',height:'90%'}" @on-cancel='closeHelpModal'>
          <Row style="height:100%">
            <Col span="4" style="height:100%;overflow:auto">
              <Tree :data="helpData" @on-select-change='selectHelpData'></Tree>
            </Col>
            <Col span="20" style="height:100%;overflow:auto">
              <Card v-if="isShow">
                <p slot="title">{{helpTitle}}</p>
                <Row>
                  <Col span="24">
                    <div v-html="helpDetail"></div>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
          <div slot="footer">
            <Button type="primary" @click="closeHelpModal">确定</Button>
          </div>
        </Modal>
      </Col>
      <Col span="16" style="text-align:right">
        <Badge :count='messageNum' overflow-count='99'>
          <a href="javascript:void(0)" @click="jumpInfo">
            <!-- <Icon type="ios-notifications-outline" size="20" style="vertical-align:middle"></Icon> -->
            <Icon type="md-notifications" size="25"/>
            <!--<img src="../../../assets/images/tip.png" alt="" style="vertical-align:middle;width:35px;height:35px;">-->
          </a>
        </Badge>
        <a href="javascript:void(0)" @click="jumpUserinfo"  style="margin-left:10px;">
          {{userName}}<Avatar style="margin:0 15px" :src="$store.state.picAdd"></Avatar>
        </a>
        <Dropdown style="margin-left: 0px">
          <!-- <a href="javascript:void(0)" @click="jumpUserinfo">
            {{userName}}<Avatar style="margin:0 10px" src="https://i.loli.net/2017/08/21/599a521472424.jpg"></Avatar> -->
          <a href="javascript:void(0)">
            <Icon type="ios-arrow-down"></Icon>
          </a>
          <!-- </a> -->
          <DropdownMenu slot="list">
            <DropdownItem>
              <p @click="clickOut" style="margin-right: 10px; color: rgb(41, 150, 255);">退出登录</p>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>

      </Col>
    </Row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        member:{},
        userName: '',
        // 在线帮助弹框
        onlineHelpModal: false,
        helpData: [
          {
            title: '系统概述',
            expand: true,
            children: []
          },{
            title: '操作帮助',
            expand: true,
            children: []
          }
        ],
        isShow: false,     //是否显示帮助
        helpDetail:　'',   //帮忙详情
        helpTitle: '',     //帮助标题
      }
    },
    computed: {
      messageNum() {
        return this.$store.state.messageNum
      }
    },
    mounted() {
      this.getUser()
      this.getMessageNum()
      //  this.setInterval();
      this.refreshMessageNum()
    },
    methods: {
      // 帮助内容
      onlineHelp() {
        // 帮助菜单
        this.$post('help.getMenus',{}).then((res) => {
          if(res._STATUS == 1) {
            // 菜单全部展开
            if(res.hmTree1.length>0) {
              res.hmTree1 = res.hmTree1.map(el=>{
                el.expand = true
                if(el.children.length>0) {
                  el.children = el.children.map(ele=>{
                    ele.expand = true
                    return ele
                  })
                }
                return el
              })
            }
            if(res.hmTree2.length>0) {
              res.hmTree2 = res.hmTree2.map(el=>{
                el.expand = true
                if(el.children.length>0) {
                  el.children = el.children.map(ele=>{
                    ele.expand = true
                    return ele
                  })
                }
                return el
              })
            }
            this.helpData[0].children = res.hmTree1
            this.helpData[1].children = res.hmTree2
            this.onlineHelpModal = true
          }
        })
      },
      selectHelpData(data) {
        // 选清空上次所选内容
        this.isShow = false
        this.helpTitle = ''
        this.helpDetail = ''
        if(data.length>0) {
          // 获取菜单详情()
          if(!(data[0].id==''||data[0].id==undefined)) {
            this.isShow = true
            this.helpTitle = data[0].title
            var paramsData = data[0].id
            this.$post('EaoGrid.findXTGS',{Id: paramsData}).then(res=>{
              // console.log(res)
              if(res._STATUS==1) {
                this.helpDetail = res.data.Content
              }else {
                this.isShow = true
                this.helpTitle = data[0].title
                this.helpDetail = '暂无帮助内容'
              }
            })
          }
        }
      },
      closeHelpModal() {
        // 关闭模态框清空所选内容
        this.helpTitle = ''
        this.helpDetail = ''
        this.onlineHelpModal = false
      },
      // setInterval(){
      //      setInterval(this.getMessageNum, 2000);
      // },
      // 每10秒获取消息条数
      refreshMessageNum() {
        window.setInterval(() => {
          setTimeout(this.getMessageNum, 0)
        }, 30000)
      },
      // 获取收件箱未读个数
      getMessageNum() {
        social.get('/unreadInfo').then(res=>{
          this.$store.commit('setMessageNum',res.sumCount)
        }).catch((err)=>{
          console.log(err)
        })
      },
      // 点击头像跳转个人信息
      jumpUserinfo() {
        console.log("**********")
        this.$router.push({
          name: 'userHeartData',
          params: {
            name: 'name2'
          }
        })
      },
      getUser() {
        axios.post("/branch/findMember").then((res) => {
          console.log(res)
          this.member = res.member;
          if(res.member.LogoFile != null &&res.member.LogoFile != ''){
            this.$store.commit('setUserHead','https://static.anhuanjia.com/avatar/'+ res.member.LogoFile + '?x-oss-process=image/resize,m_fill,h_96,w_96')
            // this.$store.state.picAdd = 
          }else{
            this.$store.commit('setUserHead','https://static.anhuanjia.com/avatar/default.png?x-oss-process=image/resize,m_fill,h_96,w_96')
            // this.$store.state.picAdd =
          }
          // console.log(this.$store.state.picAdd)
          localStorage.setItem('mobile',res.member.Mobile)
          this.userName = res.member.RealName;
        }).catch((err) => {
          console.log(err)
        })
      },
      clickOut() {
        this.$Modal.confirm({
          title: '确认退出',
          onOk: () => {
            // axios.get('http://api.ahjdev.top/member/ajaxlogout').then(res=>{
            localStorage.removeItem('userOrg')
            this.$store.commit('setUserOrg','')
            axios.get('/member/ajaxlogout').then(res=>{
              // console.log(res)
              if(res.logout==true) {
                this.$Message.info('退出成功')
                this.$router.push({'name': 'login'})
              }
            }).catch(err=>{
              console.log(err)
            })
            // this.$Message.info('退出成功')
            // this.$router.push({
            //   name: 'login'
            // })
          }
        });
      },
      jumpInfo(){           //点击头部消息图标跳转消息中心
        this.$router.push({name: 'newHeart'})
      }
    },
  };
</script>

<style scoped lang="less">
  /deep/ .ivu-badge-count {
    position: absolute;
    top: 9px;
    right: 0;
    height: 20px;
  }
  /deep/ .ivu-modal{
    .ivu-modal-content {
      height: 100%;
      overflow: auto;
      .ivu-modal-body{
        height: 86%;
      }
    }
  }

</style>
